<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="static/css/label.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="subtitle">检查所见 | 编号：<u>{[report_id]}</u></div>
                    <el-input
                            type="textarea"
                            :rows="6"
                            readonly
                            v-model="finding">
                    </el-input>
                    <div class="subtitle">检查印象</div>
                    <el-input
                            type="textarea"
                            :rows="3"
                            readonly
                            v-model="impression">
                    </el-input>
                    <div class="subtitle">评论</div>
                    <el-input
                            type="textarea"
                            :rows="2"
                            v-model="comment">
                    </el-input>
                    <el-row class="buttons">
                        <el-button type="primary" round v-on:click="findNextSpareReport">跳到下一条未标注的数据</el-button>
                        <el-button type="success" round v-on:click="saveReport">保存当前标注结果</el-button>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <div class="subtitle">结构化</div>
                    <div class="tree" style="height: 550px; overflow: scroll; padding-bottom: 40px">
                        <el-tree
                                :data="base_taxonomy"
                                show-checkbox
                                check-strictly
                                node-key="id"
                                ref="tree"
                                v-on:check="check"
                                :default-checked-keys="label_ids"
                                :default-expanded-keys="label_ids">
                        </el-tree>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script>
    let default_label_ids = [0, 1, 10, 11, 67, 68, 457, 458, 468, 469, 662, 663, 1940, 1941, 1959, 1960, 2547, 2548, 2584, 2585, 2606, 2607]
    new Vue({
        el: '#app',
        delimiters: ['{[', ']}'],
        data: {
            user_id: null,
            username: null,
            report_id: null,
            finding: '',
            impression: '',
            label_ids: default_label_ids,
            base_taxonomy: null,
            comment: null
        },
        mounted() {
            this.username = sessionStorage.getItem('username')
            this.user_id = sessionStorage.getItem('user_id')
            this.report_id = sessionStorage.getItem('report_id')

            this.getBaseTaxonomy()
            if (this.report_id != null) {
                this.findReportById(this.report_id);
            } else {
                this.findNextSpareReport()
            }
        },
        methods: {
            check(data) {
                let checked_keys = this.getCheckedKeys(leafOnly = false, includeHalfChecked = true)
                if (checked_keys.indexOf(data.id) !== -1) {
                    axios.post('tree/search_by_id', {id: data.id, checked_keys: checked_keys},
                        {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                        .then((response) => {
                            let new_checked_id_list = response.data.payload.new_checked_id_list
                            this.$refs.tree.setCheckedKeys(new_checked_id_list)
                        })
                }

            },
            getBaseTaxonomy() {
                axios.post('tree/get_base_taxonomy', {},
                    {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                    .then((response) => {
                        this.base_taxonomy = response.data.payload.data
                    })
            },
            findReportById(report_id) {
                axios.post('report/find_report_by_id', {report_id: report_id},
                    {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                    .then((response) => {
                        this.finding = response.data.payload.finding.trim()
                        this.impression = response.data.payload.impression.trim()
                        let label_ids = JSON.parse("[" + response.data.payload.label_ids + "]")[0]
                        this.label_ids = label_ids
                        this.$refs.tree.setCheckedKeys(label_ids)
                        this.comment = response.data.payload.comment
                    })
            },
            findNextSpareReport() {
                axios.post('report/find_next_spare_report', {},
                    {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                    .then((response) => {
                        this.report_id = response.data.payload.id
                        this.finding = response.data.payload.finding
                        this.impression = response.data.payload.impression
                        this.comment = null
                        this.$refs.tree.setCheckedKeys(default_label_ids)
                    })
            },
            saveReport() {
                let label_ids = this.getCheckedKeys(leafOnly = false, includeHalfChecked = true)
                axios.post('report/save_report', {
                    report_id: this.report_id,
                    label_ids: JSON.stringify(label_ids),
                    comment: this.comment
                }, {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                    .then((response) => {
                        if (response.data.code === 200) {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.findReportById(this.report_id)
                        }
                    })
            },
            getCheckedKeys(leafOnly, includeHalfChecked) {
                let checked_leafs = this.$refs.tree.getCheckedNodes(leafOnly, includeHalfChecked)
                let checked_keys = []
                for (i in checked_leafs) {
                    checked_keys.push(checked_leafs[i].id)
                }
                return checked_keys
            }
        }
    })
</script>
</html>